.hv-designer-component-container {
  height: 100%;
  width: 100%;
  position: relative;
  .hv-designer-component-header {
    height: var(--hv-dash-des-header-height);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--hv-dash-des-header-bg);
    border-bottom: var(--hv-border-width-base) var(--hv-border-style-base)
      var(--hv-dark-bor-color);
      &-logo{
        width: calc(var(--hv-dash-des-header-height) - 8px);
        height: calc(var(--hv-dash-des-header-height) - 8px);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          width: 100%;
          height: 100%;
        }
      }
    
  }

  .hv-designer-component-menu {
    height: calc(100% - var(--hv-dash-des-header-height));
    width: var(--hv-dash-des-comp-panel-width);
    width: 100%;
    .hv-designer-component-menu-item {
      width: var(--hv-dash-des-comp-panel-width);
      padding-top: 5px;
      padding-bottom: 5px;
      margin-bottom: 8px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: var(--hv-dash-des-comp-panel-color);
      transition: 0.3s;
      margin-bottom: 1px;
      &:hover {
        background-color: var(--hv-dash-des-comp-panel-hov-bg);
        color: var(--hv-dash-des-comp-panel-hov-color);
      }

      img {
        width: 50%;
        height: 50%;
        cursor: pointer;
      }

      :deep(.icon) {
        font-size: var(--hv-dash-des-comp-panel-icon-fs);
      }

      .hv-designer-component-menu-item-label {
        font-size: var(--hv-dash-des-comp-panel-fs);
      }
    }
    .hv-designer-component-menu-item-active {
      background-color: var(--hv-dash-des-comp-panel-hov-bg);
      color: var(--hv-dash-des-comp-panel-hov-color);
    }
    .hv-designer-component-menu-item-border {
      margin-bottom: 5px;
      margin-top: 5px;
      border-bottom: var(--hv-border-width-base) var(--hv-border-style-base)
      var(--hv-dark-bor-color);
    }
  }

  .hv-designer-component-popover-bg {
    position: absolute;
    left: calc(var(--hv-dash-des-comp-panel-width) + 1px);
    top: 0;
    height: 100%;
    width: calc(100vw - var(--hv-dash-des-comp-panel-width) - 1px);
    z-index: 1000;
    .hv-designer-component-popover {
      width: var(--hv-dash-des-comp-popover-width);
      height: 100%;
      background-color: var(--hv-dash-des-comp-popover-bg);
      box-shadow: var(--hv-dash-des-comp-popover-shadow);
      .hv-designer-component-popover-header {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 5px;
        padding-right: 8px;
        height: var(--hv-dash-des-comp-popover-header-height);
        color: var(--hv-dash-des-comp-popover-header-color);
        font-weight: 500;
        border-bottom: var(--hv-border-width-base) var(--hv-border-style-base)
          var(--hv-dark-bor-color);
        .hv-designer-component-popover-title {
          font-size: 14px;
          span {
            margin-left: 5px;
          }
          :deep(.icon) {
            font-size: 15px;
          }
        }
        .hv-designer-component-popover-close {
          cursor: pointer;
          :hover {
            color: var(--hv-dash-des-comp-popover-header-chc);
          }
        }
      }
      .hv-designer-component-popover-body {
        height: calc(100vh - var(--hv-dash-des-comp-popover-header-height) - 2px);
        .hv-designer-component-empty {
          height: 100%;
          padding-top: 35px;
          :deep(.hv-custom-empty-description) {
            color: var(--hv-dash-des-comp-popover-body-item-color);
          }
        }
        .hv-designer-component-item {
          display: flex;
          padding: 8px;
          transition: 0.3s;
          color: var(--hv-dash-des-comp-popover-body-item-color);
          border: var(--hv-border-width-base) var(--hv-border-style-base)
            var(--hv-dark-bor-color);
          border-radius: var(--hv-border-radius-sm);
          margin: 8px;
          &:hover {
            color: var(--hv-dash-des-comp-popover-body-item-hov-color);
            background: var(--hv-dash-des-comp-popover-body-item-hov-bg);
          }
          .hv-designer-component-preview {
            width: 55px;
            height: 42px;
            img {
              width: 55px;
              height: 45px;
              border-radius: var(--hv-border-radius-sm);
            }
          }
          .hv-designer-component-info {
            margin-left: 8px;
            .hv-designer-component-label {
              margin-top: -3px;
              width: calc(var(--hv-dash-des-comp-popover-width) - 95px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .hv-designer-component-btns {
              margin-top: 6px;
              font-size: 12px;
              opacity: 0.8;
              width: calc(var(--hv-dash-des-comp-popover-width) - 95px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: flex;
              justify-content: flex-start;
              .hv-designer-component-btn {
                font-size: 12px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 1px;
                padding-bottom: 1px;
                margin-right: 5px;
                cursor: pointer;
                border-radius: var(--hv-border-radius-sm);
                transition: 0.3s;
                color: var(--hv-dash-des-comp-popover-body-item-b-color);
                &:hover {
                  background-color: var(--hv-dash-des-comp-popover-body-item-b-hov-bg);
                  color: var(--hv-dash-des-comp-popover-body-item-b-hov-c);
                }
              }
            }
          }
        }
      }
    }
  }
}
